<template>
  <div class="user-center">
    <image class="width100 user-bg absolute" :src="bg" mode="widthFix"  />
    <div class="user-card card-shadow text-center">
      <image :src="userInfo.avatarUrl" class="logo" />
      <p>{{empInfo.employeeName}}</p>
      <div class="user-box flex-box items-center">
        <!-- <div class="user-item">
          <navigator url="/pages/user/userSet/main" class="user-btn">
            <i class="icon icon-set"></i>
            <p>账号设置</p>
          </navigator>
        </div> -->
        <div class="user-item">
          <navigator url="/pages/address/main" class="user-btn">
            <i class="icon icon-map"></i>
            <p>地址管理</p>
          </navigator>
        </div>
      </div>
      <div class="tel-box">
        <span class="inline-block" @tap="callPhone">
          <i class="icon icon-tel"></i>
          <i class="vertical-middle">{{compPhone}}</i>
        </span>
      </div>
    </div>
    <!--  #ifdef  MP-WEIXIN -->
    <view class="dialog dialog-zoom-in invite-pop tint" v-if="isGetUserInfo">
      <view class="mask"></view>
      <view class="dialog-content">
        <view class="dialog-title">小程序希望获取您的微信头像、昵称等基本信息。</view>
        <view class="flex-box text-center dialog-action">
          <button @tap="cancel">取消</button>
          <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo">确定</button>
        </view>
      </view>
    </view>
    <!--  #endif -->
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data () {
    return {
      compPhone: '010-82868686',
      bg: require('@/images/pages/u-bg.png'),
      isGetUserInfo: false,
      userInfo: {
        nickName: '',
        gender: '',
        avatarUrl: require('@/static/images/man.png')
      }
    }
  },
  computed: {
    ...mapState([
      'empInfo'
    ])
  },
  methods: {
    getuserinfo (e) {
      this.userInfo = e.mp.detail.userInfo
      this.isGetUserInfo = false
      uni.setStorageSync('userInfo', this.userInfo)
    },
    cancel () {
      this.isGetUserInfo = false
    },
    callPhone(){
      uni.makePhoneCall({
        phoneNumber: this.compPhone
      })
    }
  },
  created () {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.userInfo = userInfo
    } else {
      this.isGetUserInfo = true
    }
    this.$store.dispatch('getEmpInfo')
  },
  beforeMount () {
    this.checkLogin()
  }
}
</script>

<style lang="less">
.user-center {
  font-size: 28upx;
  padding: 180upx 30upx 0;
  .user-bg{
    z-index: -1;
    top: 0;
    left: 0;
  }
}
.user-center .user-card {
  padding: 40upx 30upx 110upx;
  height: 724upx;
  background: #fff;
}
.user-center .user-card .logo {
  width: 156upx;
  height: 156upx;
  margin: 0 auto 12upx;
  border-radius: 50%;
}
.user-center .user-card .user-box {
  width: 630upx;
  height: 198upx;
  border-top: 2upx solid #eaeaea;
  border-bottom: 2upx solid #eaeaea;
  margin-top: 12upx;
  margin-bottom: 82upx;
}
.user-center .user-card .user-box .user-item {
  width: 100%;
}
.user-center .user-card .user-box .user-item .user-btn {
  width: 160upx;
  margin: 0 auto;
}
.user-center .user-card .user-box .user-item .icon {
  margin-bottom: 16upx;
}
.user-center .user-card .user-box .user-item .icon-set {
  width: 50upx;
  height: 52upx;
}
.user-center .user-card .user-box .user-item .icon-map {
  width: 48upx;
  height: 52upx;
}
.user-center .user-card .tel-box {
  font-size: 44upx;
  font-style: oblique;
}
.user-center .user-card .tel-box .icon-tel {
  width: 44upx;
  height: 50upx;
  margin-right: 12upx;
}
.mask {
  opacity: 0.3;
}
.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 320upx;
  background: #fff;
  text-align: center;
  padding: 40upx;
  border-radius: 10upx;
}
.dialog-content .dialog-title {
  font-size: 32upx;
  line-height: 64upx;
}
.dialog-content .dialog-action {
  position: absolute;
  bottom: 40upx;
  left: 0;
  width: 100%;
}
.dialog-content .dialog-action button {
  line-height: 70upx;
  padding-left: 40upx;
  padding-right: 40upx;
}
</style>
